<template>
    <div class="container">
        <!-- 面包屑导航 -->
        <div class="breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>酒店</el-breadcrumb-item>
                <el-breadcrumb-item>{{$route.query.cityName}}酒店预订</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 搜索栏 -->
        <HotelSearchBar />
        <!-- 景点和地图 -->
        <HotelScenicsMap :cityInfo="cityInfo" :locations="filterLocation" />
        <!-- 酒店类型筛选 -->
        <HotelFilter
            @optionChange="optionChange"
            @price_ltChange="price_ltChange"
            :form="formList"
            @cancelFilter="cancelFilter"
        />
        <!-- 酒店列表 -->
        <div class="hotel_list">
            <div v-if="hotelData">
                <HoteListItem v-for="(item, index) in hotelData" :key="index" :hotelItem="item" />
            </div>

            <div class="loading" v-else>
                <img :src="require(`@/assets/loading.gif`)" alt />
            </div>
        </div>
        <div class="pagination">
            <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="form._start"
                @size-change="handleSizeChange"
                :page-sizes="[10, 15, 20, 25, 30]"
                :page-size="form._limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                prev-text="上一页"
                next-text="下一页"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
import Qs from "qs";
export default {
    data() {
        return {
            cityInfo: null,
            hotelData: null,
            form: {
                _start: 0,          // 页码
                _limit: 10,         // 每页条数
                price_lt: 4000,     // 酒店价格
                city: "",           // 城市id
                hotellevel: [],     // 酒店星级
                hoteltype: [],      // 酒店类型
                hotelbrand: [],     // 酒店品牌
                hotelasset: [],     // 酒店设施
            },
            total: 0,
        };
    },
    computed: {
        filterLocation() {
            if (this.hotelData) {
                const list = this.hotelData.map((v) => {
                    return {
                        name: v.name,
                        location: [v.location.longitude, v.location.latitude],
                    };
                });
                return list;
            }
        },
        formList() {
            return this.form;
        },
    },
    mounted() {
        this.init();
    },
    methods: {
        async init() {
            if (this.$route.query.cityName) {
                let res = await this.$axios.get(
                    "/cities?name=" + this.$route.query.cityName
                );
                this.cityInfo = res.data.data;
                this.form.city = res.data.data[0].id;
            }
        },
        async initPage() {
            let res = await this.$axios.get("/hotels", {
                params: this.form,
                paramsSerializer: function (params) {
                    return Qs.stringify(params, { arrayFormat: "repeat" });
                },
            });
            this.hotelData = res.data.data;
            this.total = res.data.total;
        },
        handleCurrentChange(currentPage) {
            this.form._start = currentPage;
        },
        handleSizeChange(size) {
            this.form._limit = size;
            this.form._start = 0;
        },
        optionChange(field, id) {
            let index = this.form[field].findIndex((v) => v === id);
            if (index === -1) {
                this.form[field].push(id);
            } else {
                this.form[field].splice(index, 1);
            }
        },
        price_ltChange(money) {
            this.form.price_lt = money;
        },
        cancelFilter() {
             this.form = {
                _start: 0,          // 页码
                _limit: 10,         // 每页条数
                price_lt: 4000,     // 酒店价格
                hotellevel: [],     // 酒店星级
                hoteltype: [],      // 酒店类型
                hotelbrand: [],     // 酒店品牌
                hotelasset: [],     // 酒店设施
            }
        },
    },
    watch: {
        $route: {
            handler() {
                this.init();
            },
            deep: true,
        },
        form: {
            handler() {
                this.initPage();
            },
            deep: true,
        },
        "form.city"() {
            this.form._start = 0;
            this.form._limit = 10;
        },
    },
};
</script>

<style lang="less" scoped>
.container {
    width: 1000px;
    margin: 0 auto;
}
// 面包屑
.breadcrumb {
    padding: 20px 0;
}
.pagination {
    text-align: right;
    margin: 20px 0;
}
.loading {
    text-align: center;
    img {
        width: 400px;
    }
}
</style>
